<html>
	<head>
		<title>Hsiao-CropUpload插件</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<script src="../../dist/jquery.min.js"></script>
		<link href="../../dist/ext/Jcrop/Jcrop.min.css" rel="stylesheet">
		<link href="./common.css" rel="stylesheet">
		<script src="../../dist/ext/Jcrop/Jcrop.min.js"></script>
		<script src="../../dist/jquery.cropupload.js"></script>
	</head>
	<body>
		<h1>批量上传</h1>
		<div class="example">
			<div class="upload"></div>
			<div class="preview clear">
				<ul>
				</ul>
			</div>
			<div class="UploadButton"><button class="startUpload">手动上传</button></div>
		</div>
		
		<script>
			var bounds;
			$('.upload').cropupload({
				url : 'http://127.0.0.1/Hsiao-CropUpload/upload.php',
				autoload : false,	//如果preview = true，autoload设置无效
				preview : true,
				multiple : true,
				fileType : 'jpg,png,gif,bmp',
				progress : function(e){
					if(e.progress==100){
						$('#fileQueue-'+e.key+' .process_layout').remove();
						$('#fileQueue-'+e.key+' .process_box').remove();
						$('#fileQueue-'+e.key).prepend('<div class="check"><img src="./check.png" /></div>');
					}
					$('#fileQueue-'+e.key+' .process_line').css('width',e.progress+'%');
				},
				success : function(res){
					console.log("上传成功");
				},
				onSelect : function(file){
					$('.cp_fileSelect').hide();
					$('.UploadButton').show();
				},
				fileUrl : function(fileUrl){
					//多、单文件上传获取文件预览地址，用于自定义预览
					for(i=0;i<fileUrl.length;i++){
						html = '<li id="fileQueue-'+i+'"><div class="process_layout"></div><div class="process_box"><span class="process_line"></span></div><img src="'+fileUrl[i]+'" /></li>'
						$('.preview ul').append(html);
					}
				},
				beforeUpload : function(){
					$('.preview .process_layout').show();
					$('.preview .process_box').show();
					$('.UploadButton').hide();
				}
			});
			
			$('.startUpload').click(function(){
				$('.upload').trigger('startUpload');
			});
		</script>
	</body>
</html>